<main>
  <div class="tab-content">
  <h3 style="font-weight: normal">基本资料</h3>
    <form #userForm="ngForm">
      <div class="tab-content user-form">
        <div class="input-container">
          <label class="key" >用户名:</label>
          <input required [(ngModel)]="user.username" name="username" type="text" pattern="^[A-Za-z]+\w{3,20}">
          <mat-error *ngIf="messages.userName">{{ messages.userName }}</mat-error>
        </div>

        <div class="input-container">
          <label class="key" >姓名:</label>
          <input required [(ngModel)]="user.realName" name="realName" type="text">
          <mat-error *ngIf="messages.realName">{{ messages.realName }}</mat-error>
        </div>

        <div class="input-container">
          <label class="key" >邮箱:</label>
          <input required [(ngModel)]="user.email" name="email" type="text" pattern="^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$">
          <mat-error *ngIf="messages.email">{{ messages.email }}</mat-error>
        </div>

        <div class="input-container">
          <label class="key" >电话:</label>
          <input required [(ngModel)]="user.phone" name="phone" type="text" pattern="^(((\+86)|(86))?1[34578]\d{9})$">
          <mat-error *ngIf="messages.phone">{{ messages.phone }}</mat-error>
        </div>

        <div class="input-container">
          <label class="key" >住址:</label>
          <input required type="text" name="address" [(ngModel)]="user.address">
          <mat-error *ngIf="messages.address">{{ messages.address }}</mat-error>
        </div>
        <!--<mat-form-field appearance="standard">-->
          <!--<mat-label>用户名</mat-label>-->
          <!--<input matInput required [(ngModel)]="user.username" name="username" pattern="^[A-Za-z]+\w{3,20}">-->
          <!--<mat-error *ngIf="messages.userName">{{ messages.userName }}</mat-error>-->
        <!--</mat-form-field>-->

        <!--<mat-form-field appearance="standard">-->
          <!--<mat-label>姓名:</mat-label>-->
          <!--<input matInput required  type="text" name="realName" [(ngModel)]="user.realName">-->
          <!--<mat-error *ngIf="messages.realName">{{ messages.realName }}</mat-error>-->
        <!--</mat-form-field>-->

        <!--<mat-form-field appearance="standard">-->
          <!--<mat-label>邮箱:</mat-label>-->
          <!--<input matInput required type="text" name="email" [(ngModel)]="user.email" pattern="^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$">-->
          <!--<mat-error *ngIf="messages.email">{{ messages.email }}</mat-error>-->
        <!--</mat-form-field>-->

        <!--<mat-form-field appearance="standard">-->
          <!--<mat-label>电话:</mat-label>-->
          <!--<input matInput type="text" name="phone" [(ngModel)]="user.phone" pattern="^(((\+86)|(86))?1[34578]\d{9})$" required>-->
          <!--<mat-error *ngIf="messages.phone">{{ messages.phone }}</mat-error>-->
        <!--</mat-form-field>-->

        <!--<mat-form-field appearance="standard">-->
          <!--<mat-label>住址:</mat-label>-->
          <!--<input matInput type="text" name="address" [(ngModel)]="user.address" required>-->
          <!--<mat-error *ngIf="messages.address">{{ messages.address }}</mat-error>-->
        <!--</mat-form-field>-->


        <button mat-button class="button  dark-green" (click)="onSubmit()" >保存</button>

      </div>
    </form>
    </div>
</main>